<template>
	<view class="totalV">
		<image class="accreditBgV" src="/static/promotionActivitybgc.jpg"></image>
		<view class="hongbao1V">成功推荐使用{{enableObj.ruleNumber}}位可赚</view>
		<view class="hongbao2V1">最高</view>
		<view class="hongbao2V">{{enableObj.amount}}</view>
		<view class="hongbao3V">推荐小哥换电</view>
		<!-- 如何获取80元 -->
		<view class="piece1V">
			<view class="piece1Title" @click="gonglueFn">
				<span class="piece1TitleS1">如何获取推广奖励</span>
				<span class="piece1TitleS2"><span>查看攻略</span><span>></span></span>
			</view>
			<view class="piece1Middle">
				<view class="piece1MiddleZou">
					<view class="piece1MiddleZouTop">最高得</view>
					<view class="piece1MiddleZouMiddle">{{enableObj.amount}}元</view>
					<view class="piece1MiddleZouFooter">好友30天内成功换电</view>
				</view>
				<view class="piece1MiddleYou">
					<view class="piece1MiddleYouBgc">暂未开放</view>
					<view class="piece1MiddleYouTop">必得</view>
					<view class="piece1MiddleYouTop1">限时7天</view>
					<view class="piece1MiddleYouMiddle">30元</view>
					<view class="piece1MiddleYouFooter">好友再邀请一个用户</view>
				</view>
			</view>
		</view>
		<!-- 红包以下的内容，当需要申请为推广员时就显示 -->
		<view class="openPromotionId">
			<button class="openPromotionIdBtn" @click="openPromotionIdFn">申请成为推广员</button>
		</view>
	</view>
</template>

<script>
	import {
		promotionUserApply,
		getUserInfo
	} from '@/api/user.js'
	export default {
		data() {
			return {
				promotionId: '',
				enableObj: {},
			}
		},
		onLoad(e) {
			console.log('传过来的', e);
			this.enableObj = e
		},
		onShow() {
			this.promotionId = uni.getStorageSync('PromotionId') || ''
		},
		methods: {
			// 查看攻略
			gonglueFn() {
				this.toast(`成功推荐${this.enableObj.ruleNumber}位好友换电，最高可得${this.enableObj.amount}元`)
			},
			// 申请成为推广员
			async openPromotionIdFn() {
				const res = await promotionUserApply()
				console.log('111', res);
				if (res.code === 200) {
					const qq = await getUserInfo()
					console.log('用户信息', qq.data.promotion_id);
					uni.setStorageSync('PromotionId', qq.data.promotion_id)
					this.toast(`申请开通成功，即将进入推广赚钱页面`)
					setTimeout(() => {
						uni.reLaunch({
							url: `/pages/user/extensionActivity/index`,
						});
					}, 2000)
				} else {
					this.toast(`申请失败`)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.totalV {
		width: 100%;
		height: 100%;
	}

	.accreditBgV {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		// z-index: -5;
	}


	.hongbao1V {
		position: absolute;
		top: 19%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 36upx;
		font-weight: 700;
	}

	.hongbao2V {
		position: absolute;
		top: 26.5%;
		left: 48%;
		transform: translate(-50%, -50%);
		font-size: 150upx;
		font-weight: 400;
		color: #ee1e2c;
	}

	.hongbao2V1 {
		position: absolute;
		top: 26.5%;
		left: 28%;
		transform: translate(-50%, -50%);
		font-size: 30upx;
		font-weight: 400;
		color: #ee1e2c;
	}

	.hongbao3V {
		position: absolute;
		top: 39.5%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 42upx;
		font-weight: 700;
		color: #e12830;
	}

	.piece1V {
		position: absolute;
		top: 59.5%;
		left: 50%;
		width: 90%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);

		.piece1Title {
			display: flex;
			justify-content: flex-end;

			.piece1TitleS1 {
				text-align: center;
				position: absolute;
				left: 50%;
				transform: translate(-50%, 0%);
				font-size: 36upx;
				font-weight: 700;
				color: #000;
			}

			.piece1TitleS2 {
				text-align: center;
				position: absolute;
				right: 5%;
				transform: translate(0%, 60%);
				font-size: 23upx;
				font-weight: 700;
				color: #999;
				height: 20px;


			}

		}

		.piece1Middle {
			display: flex;
			justify-content: space-around;
			margin-top: 10%;
			margin-bottom: 5%;

			.piece1MiddleZou {
				background-color: #fadbc9;
				width: 40%;
				border-radius: 12px 0 0 0;
				overflow: hidden;

				.piece1MiddleZouTop {
					background-color: #ff423d;
					width: 36%;
					font-size: 22upx;
					color: #fff5da;
					padding: 10upx;
					border-radius: 24upx 0 24upx 0;
				}

				.piece1MiddleZouMiddle {
					font-size: 46upx;
					color: #ff3838;
					margin-left: 43%;
					padding-bottom: 7%;
				}

				.piece1MiddleZouFooter {
					font-size: 25upx;
					color: #645447;
					border-top: 1px dashed #999;
					text-align: center;
					padding-bottom: 7%;
					padding-top: 7%;
				}
			}

			.piece1MiddleYou {
				background-color: #fadbc9;
				width: 40%;
				border-radius: 12px 0 0 0;
				overflow: hidden;
				position: relative;

				.piece1MiddleYouBgc {
					width: 100%;
					height: 100%;
					position: absolute;
					background-color: rgba(0, 0, 0, 0.4);
					border-radius: 12px 0 0 0;
					font-size: 46upx;
					line-height: 400%;
					color: #fff;
					text-align: center;

				}


				.piece1MiddleYouTop {
					background-color: #ff423d;
					width: 36%;
					font-size: 26upx;
					color: #fff5da;
					padding: 10upx;
					border-radius: 24upx 0 24upx 0;
				}

				.piece1MiddleYouTop1 {
					font-size: 26upx;
					color: #645447;
					float: left;
				}

				.piece1MiddleYouMiddle {
					font-size: 46upx;
					color: #ff3838;
					margin-left: 43%;
					padding-bottom: 7%;
				}

				.piece1MiddleYouFooter {
					font-size: 25upx;
					color: #645447;
					border-top: 1px dashed #999;
					text-align: center;
					padding-bottom: 7%;
					padding-top: 7%;
				}
			}
		}
	}

	.openPromotionId {
		position: absolute;
		top: 86.5%;
		left: 50%;
		width: 90%;
		transform: translate(-50%, -50%);
		background-color: #ff2e27;
		border-radius: 50upx;
		box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
	}

	.openPromotionIdBtn {
		padding-bottom: 20upx;
		padding-top: 20upx;
		font-size: 50upx;
		color: #fff;
		height: 60px;
		line-height: 35px;
	}
</style>